<template>
    <div class="home">
        <el-dropdown class="welcome-dropdown">
            <span class="el-dropdown-link">
                欢迎{{ newdata.account }}登录
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="center">个人中心</el-dropdown-item>
                    <el-dropdown-item @click="login">重新登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <div class="img">
            <div class="demo-type">
               
                <div>
                    <img :src="img" alt="">
                </div>
                
            </div>
        </div>
    </div>


</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getaccountinfo } from '../../src/api/account'
import { serverUrl } from "../../src/utils/commen"
import { useRouter } from 'vue-router'
import { UserFilled } from '@element-plus/icons-vue'
const router = useRouter();
//prpos
const props = defineProps({
    account: {
        type: String,
        default: ''
    }
})
const newdata = ref({
    id: 1,
    account: null,
    userGroup: null,
    createTime: null,
    avatar: null
});

//获取用户信息
const img = ref();
const accountinfo = async (id)=>{
  const data = await getaccountinfo(id);
//   console.log(data.accountInfo.imgUrl);
  img.value = serverUrl+data.accountInfo.imgUrl;
}

accountinfo({id:sessionStorage.getItem('accountid')});

// 定义一个函数，用于获取个人信息
const fetchAccountInfo = async (msg) => {
    const data = await getaccountinfo(msg);
    newdata.value = data.accountInfo;
    newdata.imgUrl = serverUrl + data.accountInfo.imgUrl;
    // console.log(data.accountInfo);
};
fetchAccountInfo({ id: sessionStorage.getItem('accountid') });

const center = () => {
    router.push('/personcenter')
}
const login = () => {
    router.push('/login')
}
</script>

<style scoped>
.welcome-dropdown {
    display: flex;
    align-items: center;
}

.el-dropdown-link {
    cursor: pointer;
    display: flex;
    align-items: center;
}

img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.home {
    width: 180px;
    display: flex;
}

.demo-type {
    display: flex;
}

.demo-type>div {
    flex: 1;
    text-align: center;
}

.demo-type>div:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
}
</style>
